import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { withStyles } from 'material-ui/styles'

import { ActionCreators } from '../actions'
import Header from '../components/header'
import LoginPage from '../components/login'
import Footer from '../components/footer'
import SearchTitle from '../components/search/SearchTitle'
import SearchBar from '../components/search/SearchBar'
import PopTag from '../components/poptag'
import CourseList from '../components/course/CourseList'
import MessageBar from '../components/tools/MessageBar'

import bg from '../assets/bg.jpg'

const styles = theme => ({
	root: {
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'center',
		width: '90%',
		marginRight: 'auto',
		marginLeft: 'auto',
	},
	header: {
		marginBottom: 55,
	},
	searchTitle: {
		marginBottom: 80
	},
	searchBars: {
		width: '60%',
		background: 'white'
	},
	popTag: {
		width: '90%'
	},
	footer: {
		width: '99.5%'
	},
	background: {
		width: 'calc(100% + 173px)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundImage: `url(${bg})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'bottom',
    paddingBottom: 120,
    paddingTop: 80,
	},
	'@media (max-width: 600px)': {
  	searchBars: {
			width: '90%',
		},
		popTag: {
			width: '100%'
		},
		root: {
			width: '100%'
		},
		header: {
			marginBottom: 30,
		},
		background: {
			width: 'calc(100% + 16px)',
		}
  },
})

@withStyles(styles)
@connect(mapStateToProps, mapDispatchToProps)
class HomeContainer extends Component {
	constructor(props) {
	  super(props)
	}

	render() {
		const {classes} = this.props
		return (
				<div className={classes.root}>
					<div className={classes.header}>
						<Header { ...this.props } showSubTitle={true} showLogoTitle={true} showOperations={true} showLogo={true} position='absolute'/>
					</div>
					<div className={classes.background}>
						<div className={classes.searchTitle}>
							<SearchTitle />
						</div>
						<div className={classes.searchBars}>
	        		<SearchBar {...this.props} disableUnderLine={true}/>
	        	</div>
	        </div>
					<div className={classes.popTag}>
        		<PopTag {...this.props} />
		      </div>
		      <CourseList courses={this.props.recomms} { ...this.props } />
					<div className={classes.footer}>
						<Footer />
					</div>
					<LoginPage {...this.props} />
					<MessageBar {...this.props} />
				</div>
			)
	}
	componentDidMount() {
		this.props.setOffset(0)
		this.props.fetchRemmons()
	}
}

function mapDispatchToProps( dispatch ){
	return bindActionCreators( ActionCreators, dispatch)
}

function mapStateToProps( state ) {
	return {
		isAuthed: state.auth.isAuthed,
		searchKey: state.searchKey,
		recomms: state.site.recomms,
    showFeedback: state.site.showFeedback,
    message: state.site.message,
	}
}

export default HomeContainer